@import url("./common.css");

/* 按钮 */
.the-btn {
  padding: 0 16px; 
  font-size: 14px;
  border-radius: 2px;
  min-width: 88px;
  height: 32px;
  line-height: 1;
  overflow: hidden;
  outline: none;
  border: none;
  text-align: center;
  /* vertical-align: middle; */
  cursor: pointer;
  user-select: none;
  background-color: #fff;
  color: #333;
  transition: .2s all;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  appearance: none;
  background-color: #eee;
  color: #555;
}

.the-btn:active {
  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}

.the-btn a {
  height: 100%;
}

.the-btn + .the-btn {
  margin-left: 10px;
}

.the-btn.blue { background-color: var(--blue); color: #fff; }
.the-btn.green { background-color: var(--green); color: #fff; }
.the-btn.red { background-color: var(--red); color: #fff; }
.the-btn.orange { background-color: var(--orange); color: #fff; }
.the-btn.purple { background-color: var(--purple); color: #fff; }

.the-text {
  font-size: 14px;
  line-height: 16px;
  color: #333;
}
.the-text.blue { color: var(--blue); }
.the-text.green { color: var(--green);; }
.the-text.red { color: var(--red);; }
.the-text.orange { color: var(--orange); }
.the-text.purple { color: var(--purple); }
.the-text.grey { color: var(--grey); }

.the-title,
.shadow-text {
  letter-spacing: 3px;
  line-height: 24px;
  font-size: 18px;
  color: rgb(255, 255, 255);
  text-shadow: var(--text-shadow-bg) 1px 1px, var(--text-shadow-bg) 1px -1px, var(--text-shadow-bg) -1px 1px, var(--text-shadow-bg) -1px -1px, var(--text-shadow-bg) 0px 1.4px, var(--text-shadow-bg) 0px -1.4px, var(--text-shadow-bg) -1.4px 0px, var(--text-shadow-bg) 1.4px 0px, var(--text-shadow-color) 2px 2px, var(--text-shadow-color) 3px 3px, var(--text-shadow-color) 3px 1px, var(--text-shadow-color) 1px 3px, var(--text-shadow-color) 1px 1px, var(--text-shadow-color) 2px 3.4px, var(--text-shadow-color) 2px 0.6px, var(--text-shadow-color) 0.6px 2px, var(--text-shadow-color) 3.4px 2px;
  box-sizing: border-box;
  font-style: italic;
}

.the-title {
  display: inline-block;
  position: relative;
}
.the-title::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #888;
}

.the-card { 
  border-radius: 2px; 
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); 
  background-color: #fff;
  overflow: hidden;
}

/* 页面结构处理 */
.page { width: 100%; min-height: 100vh; overflow: hidden; margin: 0 auto; max-width: 680px; }
